<template>
    <a-drawer :title="title" width="80%" :visible="visible" :maskClosable="false" :body-style="{ paddingBottom: '80px' }" @close="onClose" class="content_drawer">
        <a-row  align="left" style="margin-top: 0px;margin-bottom: 20px;">
            <a-select v-model="contenttype" style="width: 220px" @change="Change_select">
                <a-select-option value="文本">文本</a-select-option>
                <a-select-option value="图片">图片</a-select-option>
                <a-select-option value="视频">视频</a-select-option>
                <a-select-option value="链接">链接</a-select-option>
            </a-select>
            <div class="ant-upload ant-upload-select ant-upload-select-text" style="margin-left: 30px;" v-if="contenttype=='视频' || contenttype=='图片'">
                    <span role="button" tabindex="0" class="ant-upload">
                        <input type="file" id="inputfile" ref="inputfile" accept="" multiple="multiple" style="display: none;"  @change="changefile" :accept="accept">
                        <button type="button" class="ant-btn" ant-click-animating-without-extra-node="false" @click="clickvideofile">
                            <a-icon type="upload"/>
                            <span>点击上传</span>
                        </button>
                    </span>
                </div>
             <a-button type="primary" @click="add" style="margin-left: 30px;"> 确定添加</a-button>
        </a-row>
        <a-row  align="left" :gutter="[16,16]"  v-show="contenttype=='文本'">
            <a-row  align="left"  class="content_drawer_row btn-container" style="border: 1px solid rgb(204, 204, 204);">
                <a-tooltip placement="bottom">
                    <template slot="title">
                        <span>缩进</span>
                    </template>
                    <a class="btn btn-default" href="#" title="" @click="backem"><a-icon type="double-right"/></a>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template slot="title">
                        <span>退回缩进</span>
                    </template>
                    <a class="btn btn-default" href="#" title="" @click="prem"><a-icon type="double-left"/></a>
                </a-tooltip>
                
                <a-tooltip placement="bottom">
                    <template slot="title">
                        <span>加粗</span>
                    </template>
                    <a class="btn btn-default" href="#" title="" @click="weightcontent('bold')"><a-icon type="bold"/></a>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template slot="title">
                        <span>斜体</span>
                    </template>
                    <a class="btn btn-default" href="#" title="" @click="weightcontent('italic')"><a-icon type="italic"/></a>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template slot="title">
                        <span>下划线</span>
                    </template>
                    <a class="btn btn-default" href="#" title="" @click="weightcontent('underline')"><a-icon type="underline"/></a>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template slot="title">
                        <span>font-size</span>
                    </template>
                    <a class="btn btn-default" href="#" title="" @click="weightcontent('font-size')"><a-icon type="font-size"/></a>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template slot="title">
                        <span>font-colors</span>
                    </template>
                    <a class="btn btn-default" href="#" title="" @click="weightcontent('font-colors')"><a-icon type="font-colors"/></a>
                </a-tooltip>
            </a-row>
            <a-row style="margin-top: 20px;">
                <div  style='border:1px solid #cccccc; '>
                    <div id="textareaid" contenteditable="true" class="textarea"   v-bind:style="{ 'min-height': '20em', 'text-indent': indent + 'em' }"></div>
                </div>  
            </a-row> 
        </a-row>
        <a-row  align="left" :gutter="[16,16]"  v-if="contenttype=='视频' || contenttype=='图片'">
            <a-row  align="left"  class="content_drawer_row btn-container" >
                 <a-form :form="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 6 }">
                    <a-form-item label="视频/图片描述：">
                        <a-input v-decorator="['discrible']"/>
                    </a-form-item>
                </a-form>
                <div class="ant-upload-my" v-if="videofile">
                    <span>
                        <div :class="['ant-upload-list-item', 'ant-upload-list-item-uploading', 'ant-upload-list-item-list-type-text',uploaderror?'ant-upload-list-item-error':'']" style="width: 30%;">
                            <div class="ant-upload-list-item-info">
                                <span>
                                    <a-icon type="loading" v-if="uploading"/>
                                    <a-icon type="paper-clip" v-if="uploadsucess||uploaderror"/>
                                    <span :title="videofile.name" class="ant-upload-list-item-name">{{videofile.name}}</span>
                                    <span class="ant-upload-list-item-card-actions " @click="removefile">
                                        <a title="删除文件">
                                            <a-icon type="delete"/>
                                        </a>
                                    </span>
                                </span>
                            </div>
                            <div class="ant-upload-list-item-progress" v-show="uploading">
                                <a-progress :percent="percentage" />
                            </div>
                        </div>
                    </span>
                </div>
                
            </a-row>
            <a-row style="margin: 20px;border:1px solid #cccccc;min-height: 305px;text-align: center;padding: 10px;" >
                <div class="ant-upload-list ant-upload-list-picture-card showpics" style="margin: 0 auto;width: 285px;" v-if="uploadsucess==true && contenttype=='图片'">
                    <div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
                        <div class="ant-upload-list-item-info">
                            <span>
                                <a href="javacript:void(0);" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail">
                                    <img :src="videourl"  class="ant-upload-list-item-image">
                                </a>
                            </span>
                        </div>
                        <span class="ant-upload-list-item-actions">
                            <a-icon type="eye-o" @click="showmodel" />
                            <a-icon type="delete" @click="removefile"/>
                        </span>
                    </div>
                </div>
                <div v-show="uploadsucess==true && contenttype=='视频'">
                    <video class="edui-upload-video  vjs-default-skin video-js" controls="" preload="none" width="420" height="280" :src="videourl" data-setup="{}"></video>
                </div>
            </a-row> 
        </a-row>
        <a-modal v-model="modelvisible"  @ok="modelok" :footer="null" :centered="true">
            <img alt="example" :src="videourl" style="width: 100%;">
        </a-modal>
    </a-drawer>
</template>
<script>
    import Bus from '../../../src/bus.js';
    import $ from 'jquery';
    export default {
        data() {
            return {
                visible:false,
                title:'添加新闻内容',
                contenttype:'文本',
                content:{
                    type:'文本',
                    value:{
                        discrible:'',
                        content:''
                    }
                },
                indent:0,
                /////
                videofile:null,
                uploading:false,
                uploaderror:false,
                uploadsucess:false,
                percentage:0,
                videourl:null,
                

                accept:"image/*",
                form:this.$form.createForm(this, { name: 'coordinated' }),

                modelvisible:false,
                //////////////
                currentRange:null,
                selection:null,

            }
        },
        mounted() {
            Bus.$on('set_drawer_title', (title) => {
                this.title=title
            })
            Bus.$on('show_drawer', () => {
                this.visible=true
                this.$nextTick(()=>{
                    this.$textarea=$('.textarea');
                    let that=this
                    this.$textarea.off('focus click keyup').on('focus click keyup', function(e){
                        var keyForMoveCursor = false,kCodes = ' 33, 34, 35, 36, 37, 38, 39, 40, 8, 46 ';
                        keyForMoveCursor = ( e.type === 'click' || e.type === 'focus' || (e.type === 'keyup' && kCodes.indexOf(e.keyCode) !== -1) );
                        if (!keyForMoveCursor) {
                            return;  //只监听click,focus和[33, 34, 35, 36, 37, 38, 39, 40, 8, 46]这几个键，其他的不监听
                        }
                        that.getCurrentRange();
                    });
                });
            })
            Bus.$on('set_value', (status) => {
                this.logined=status
            })
            this.init();
        },
        methods:{
            init(){
                this.content={}
                this.indent=0;

                this.videofile=null;
                this.videourl=null;
                this.currentRange=null;
                this.selection=null;


                this.uploading=false;
                this.uploaderror=false;
                this.uploadsucess=false;
                this.percentage=0;
                this.accept="image/*"
            },
            onClose(){
                this.init();
                this.visible=false

            }, 
            weightcontent(commandName){  
                document.execCommand(commandName, false, undefined);
            },
            Change_select(value) {
                if(value=='图片'){
                    this.accept="image/*"
                }
                else if(value=='视频'){
                    this.accept="audio/mp4,video/mp4"  

                }
            },
            add(){
                if(this.contenttype=='文本'){
                    this.content.type=this.contenttype
                    this.content.value={
                        discrible:this.indent+"",
                        content:this.$textarea.html()
                    }
                    this.$textarea.html('')
                }
                else if(this.contenttype=='图片'){
                     if(this.videourl==null){
                        this.$message.info('您还没有添加图片');
                        return
                    }
                    let discrible="";
                    this.form.validateFields((err, values) => {
                        if (!err) {
                            discrible=values.discrible
                        }
                    });
                    this.content.type=this.contenttype
                    this.content.value={
                        discrible:discrible?discrible:'',
                        content:this.videourl
                    }
                }
                else if(this.contenttype=='视频'){
                    if(this.videourl==null){
                        this.$message.info('您还没有添加视频');
                        return
                    }
                    let discrible="";
                    this.form.validateFields((err, values) => {
                        if (!err) {
                            discrible=values.discrible
                        }
                    });
                    this.content.type=this.contenttype
                    this.content.value={
                        discrible:discrible?discrible:'',
                        content:this.videourl
                    }
                }
                else if(this.contenttype=='链接'){

                }
                else{
                    return
                }
                Bus.$emit('add_new_content',this.content);
                this.onClose() 
            },
            backem(){
                this.indent+=2;
            },
            prem(){
                this.indent=this.indent>=2?this.indent-2:0;
            },

            getCurrentRange() {
                let selection,range,parentElem,txt = this.$textarea[0];
                //获取选中区域
                // if(supportRange){//w3c
                    
                // }
                selection = document.getSelection();
                if (selection.getRangeAt && selection.rangeCount) {
                    range = selection.getRangeAt(0);
                    parentElem = range.commonAncestorContainer;
                }
                //确定选中区域在$txt之内
                if( parentElem && (parentElem.id = txt.id || $.contains(txt, parentElem)) ){
                    this.currentRange=range;
                }
            },
            restoreSelection() {
                if(!this.currentRange){
                    return;
                }
                var selection,range;
                // if(supportRange){
                //     //w3c
                   
                // }
                 this.selection = document.getSelection();
                this.selection.removeAllRanges();
                this.selection.addRange(this.currentRange);
            },
            clickvideofile(){
                let _this=this;
                setTimeout(function(){
                    _this.$refs.inputfile.click();
                },10)
            },
            changefile(event){
                this.videofile='';
                if(event.srcElement.files.length==1){ 
                    this.videofile=event.srcElement.files[0];
                }
                var inputfile = document.getElementById('inputfile');
                inputfile.value = ''; 
                this.upload();
            },
            removefile(){
                this.init();
            },
            upload(file){
                this.uploading=true;
                this.uploaderror=false;
                this.uploadsucess=false
                this.$upload.set_options({
                    file:this.videofile,
                    action:window.Glod.ajax+"xzqh/uploads?",
                    data:{
                        type:'uploadfile',
					    // token:Common.GetStorage('token')
                    },
                    onProgress:this.onProgress,
                    onSuccess:this.onSuccess,
                    onError:this.onError,
                })
            },
            onProgress(value,index,length){
                this.percentage=value;
            },
            onSuccess(filename){
                this.uploading=false;
                this.videourl=filename;
                this.uploadsucess=true
                this.$message.success('上传完成 请预览');
                console.log(this.videourl);
            },
            onError(message){
                this.uploading=false;
                this.uploaderror=true;
                this.$message.error('上传失败！');

            },
            showmodel(){
                this.modelvisible = true;
            },
            modelok(){
                this.modelvisible = false;
            }
        }

        
  }
</script>